<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../element-ui-2.13.0/lib/theme-chalk/index.css" />
    <script type="text/javascript" src="../../vue/vue-v2.6.10.js"></script>
    <script type="text/javascript" src="../../element-ui-2.13.0/lib/index.js"></script>
    <script type="text/javascript" src="../../vue/axios-0.18.0.js"></script>
</head>

<body>
    <div id="app">
        <el-tag type="info" effect="dark" v-if="inputVisible" closable="true" :disable-transitions="disable"
            @close="handleClose">用户课程管理</el-tag>
        <div v-if="inputVisible">
            <template>
                <el-table
                    :data="tableData.filter(data => !search || data.user.name.toLowerCase().includes(search.toLowerCase()))"
                    style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="50">
                    </el-table-column>
                    <el-table-column label="序号" type="index" width="100px" prop="uid">
                    </el-table-column>
                    <el-table-column label="课程名称" prop="course.courseName">
                    </el-table-column>
                    <el-table-column label="选课人" prop="user.name">
                    </el-table-column>
                    <el-table-column align="right" width="200px">
                        <template slot="header" slot-scope="scope">
                            <el-input v-model="search" size="mini" @blur="handleSearch" placeholder="输入选课人搜索" />
                        </template>
                        <template slot-scope="scope">
                            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                            <el-button size="mini" type="danger" @click="handleLook(scope.$index, scope.row)">详情
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>

            <br />
            <el-row>
                <el-button type="warning" @click="delAll()">删除选中</el-button>
            </el-row>

            <!--  分页 -->
            <template>
                <div class="block" align="right">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="currentPage" :page-sizes="[3, 4, 5, 6]" :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
                    </el-pagination>
                </div>
            </template>
        </div>

        <!--修改选课-->
        <el-dialog title="修改选课" :visible.sync="dialogFormVisible1">
            <el-form ref="ruleForm" :model="ruleForm" label-width="80px">
                <el-form-item label="课程名称" prop="cid">
                    <el-select v-model="ruleForm.cid" placeholder="请选择课程">
                        <el-option v-for="item in courseNames" :value="item.cid" :label="item.courseName"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选课人">
                    <el-input v-model="ruleForm.user.name" style="width: 210px;"></el-input>
                </el-form-item>
                <el-form-item label="联系方式">
                    <el-input v-model="ruleForm.user.phone" style="width: 210px;" disabled></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
            </span>
        </el-dialog>

        <!--结尾-->
        <!--查看选课-->
        <el-dialog title="选课信息" :visible.sync="dialogFormVisible2">
            <el-form ref="ruleForm" :model="ruleForm" label-width="80px">
                <el-form-item label="课程名称">
                    <el-input v-model="ruleForm.course.courseName" style="width: 210px;"></el-input>
                </el-form-item>
                <el-form-item label="课程类型">
                    <el-input v-if="ruleForm.course.courseType==1" style="width: 210px;" value="Java"></el-input>
                    <el-input v-if="ruleForm.course.courseType==2" style="width: 210px;" value="数据库"></el-input>
                    <el-input v-if="ruleForm.course.courseType==3" style="width: 210px;" value="前端"></el-input>
                </el-form-item>
                <el-form-item label="课程价格">
                    <el-input v-model="ruleForm.course.coursePrice" style="width: 210px;"></el-input>
                </el-form-item>
                <el-form-item label="选课人">
                    <el-input v-model="ruleForm.user.name" style="width: 210px;"></el-input>
                </el-form-item>
                <el-form-item label="联系方式">
                    <el-input v-model="ruleForm.user.phone" style="width: 210px;"></el-input>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!--结尾-->


    </div>

</body>
<script>
    axios.defaults.withCredentials = true
    new Vue({
        el: "#app",
        data: {
            /* 分页参数 */
            tableData: [],
            currentPage: 1,
            totalCount: '',
            pageSize: 3,
            /* 条件查询 */
            search: '',
            //批量删除存放选中的复选框
            multipleSelection: [],
            //批量删除存放的uid
            delarr: [],
            /*选项卡*/
            inputVisible: true,
            disable: false,
            //修改的对话框
            dialogFormVisible1: false,
            //详情的对话框
            dialogFormVisible2: false,
            //表单字段
            ruleForm: {
                cid: '',
                course: '',
                user: '',
                courseImage: '',
                courseVideo: ''
            },
            courseNames: []
        },
        methods: {
            handleSearch(){
                this.currentPage=1;
                this.findAllByPage();
            },
            
            handleClose() {
                this.inputVisible=false;
                
            },
          
            handleEdit(index, row) {
                this.dialogFormVisible1 = true;
                this.ruleForm = row;
            },
          
            handleLook(index, row) {
               this.dialogFormVisible2=true;
               this.ruleForm=row;
            },
          
            findAllByPage() {
                var url = "http://localhost:8080/myedu/courseuser?method=findByPage&pageSize="+this.pageSize+
                "&currentPage="+this.currentPage;
                if (this.search!=null && this.search.trim()!="") {
                    url += "&search="+this.search;
                    
                }
                axios.get(url).then(resp =>{
                    //将数据绑定到表格中
                    this.tableData=resp.data.data.list;
                    this.totalCount = resp.data.data.totalCount;
                })
            },
            //页容量的改变
            handleSizeChange(val) {
               this.pageSize=val;
               this.findAllByPage();
            },
            //当前页码的改变
            handleCurrentChange(val) {
                this.currentPage=val;
                this.findAllByPage();
            },
        
            handleSelectionChange(val) {
              this.multipleSelection=val;
            },
          
            delAll() {

                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //获取所有uid
                    for (var i = 0; i < this.multipleSelection.length; i++) {
                        this.delarr.push(this.multipleSelection[i].id);
                    }
                    //判断数组长度
                    if (this.delarr.length == 0) {
                        this.$message({
                            type: "success",
                            message: resp.data.msg
                        })

                    } else {
                        axios({
                            url: "http://localhost:8080/myedu/courseuser?method=delCourseUser&uids="+this.delarr,
                            method: "get"
                        }).then(resp => {
                            if (resp.data.code == 200) {
                                this.$message({
                                    type: "success",
                                    message: resp.data.msg
                                })
                            } else {
                                this.$message({
                                    type: "warning",
                                    message: resp.data.msg
                                })
                            }
                            setTimeout(() => {
                                location.href="index.html";
                            }, 1000);
                        })
                    }
                })

            },

            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {

                        //注意这里不用传数据了就
                        axios({
                            url: "http://localhost:8080/myedu/courseuser?method=updateCourseUser&cid=" + this.ruleForm.cid + "&id=" + this.ruleForm.id,
                            method: "get",
                        }).then(resp => {
                            if (resp.data.code == 200) {
                                this.$message({
                                    type: "success",
                                    message: resp.data.msg
                                })
                            } else {
                                this.$message({
                                    type: "warning",
                                    message: resp.data.msg
                                })
                            }
                            //这里也不是跳转，
                            this.dialogFormVisible1 = false;
                            this.findAllByPage();
                        })
                        //axios请求服务器做添加操作
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },

            findAllCourse() {
                axios.get("http://localhost:8080/myedu/course?method=findAll").then(resp => {
                    if (resp.data.code == 200) {
                        this.courseNames=resp.data.data;
                    }
                })
            }
        },
        created() {
            this.findAllByPage();
            this.findAllCourse();
        }

    })
</script>

</html>